<!DOCTYPE html>
<html>
  <head>
    <title>Todo List</title>
  </head>

  <body>
    <!-- <h1>Todo List</h1> -->
    <!-- <center>
      <font color="”red" ”>Welcome to Web Site</font>
    </center> -->

    
    <!-- <div><h1 class="mytitle">Todo List</h1></div> -->
    <!-- 设置标题在最高处 -->
    <!-- <div class="mytitle">Todo List</div> -->

    <div class="main" style="color: rgb(53, 39, 114)">
      <div class="row">
        <input
          class="input"
          type="text"
          id="inputtext"
          onkeydown="handlekeydown(event)"
        />
        <input
          type="button"
          name="bt"
          value="添加"
          onclick="handleClick(event)"
          id="button1"
        />
        <input type="button" name="bt" value="删除" id="button2" />
      </div>

      <div id="todogroup">
        <!-- <div id="todo1"><input class="inck" type="checkbox"/>吃饭<button id="todob1" onclick="deleteIndex(1)"> 删除</button></div>
                <div id="todo2"><input class="inck" type="checkbox"/>睡觉<button id="todob2" onclick="deleteIndex(2)"> 删除</button></div>
                <div id="todo3"><input class="inck" type="checkbox"/>打豆豆<button id="todob3" onclick="deleteIndex(3)"> 删除</button></div> -->
      </div>

      <span style="color: rgb(96, 96, 113)">endline-----======</span>

      <div id="all_selected">
        <input
          type="checkbox"
          id="all_selectedip"
          onclick="clickSelectBox(event)"
        />

        <label id="checkboxSign" for="all_selected">全选</label>
      </div>
    </div>
  </body>
  <style>
    /* padding: 20px 30px 40px 50px     --与父容器上下左右的距离 */
    /* padding-top: 20px                --与父容器上侧距离 */

    /* .mytitle {
      text-align: center;
      color: rgb(53, 39, 114);
      font-size: 30px;
      font-weight: 600;
      margin-top: 0px;
      
    } */
    body {
      background-image: url("bkg.jpg");
      display: flex;
      justify-content: center; 
      align-items: center; 
      min-height: 100vh;
      opacity: 0.92;
      

      
    }

    .main {
      /* background-color: aqua;*/
      /* width: 240px;
            height: 240px;  */

      background-color: #70d8f0;
      padding: 8px;
      border: 6px solid rgb(141, 237, 202);
      border-radius: 8px;
    }

    .row {
      display: flex;
      border: 3px;
      border-color: #1c1d1e;
      /* background-color: #c5dbee; */
    }

    #inputtext {
      flex-grow: 1;
      /* width: 100%; */
      /* height: 30px; */
      /* background-color: #d4ebb9; */
      /* color: white; */
      margin: 6px;
      padding: 3px;
      border-radius: 4px;
    }

    #button1 {
      /* flex-grow: 1; */
      margin: 6px;
      padding: 3px;
      border-radius: 4px;
    }

    #button2 {
      /* flex-grow: 1; */
      margin: 6px;
      padding: 3px;
      border-radius: 4px;
      /* margin-left: 200px; */
    }

    .item {
      display: flex;
      /* justify-content: space-between; */
      align-items: center;
      /* width: 100%; */
      /* height: 30px; */
      /* background-color: #d4ebb9; */
      /* color: white; */
      margin: 6px;
      padding: 3px;
    }

    .item-value {
      flex-grow: 1;
      color: rgb(0, 0, 0);
    }

    .item-del {
      color: aliceblue;
      background-color: rgb(230, 180, 245);
      border: 0px;
      /* margin-left: 200px; */
    }
    .input {
      padding: 8px;
      outline: none;
      border: 2px soild #b1afaf;
    }
    .item-del {
      color: white;
      background-color: purple;
      border: 0px;
      opacity: 0;

      /* opacity: 0; */
      /* clear:both;
      float:right; */
      margin-left: 200px;
    }
    .item:hover {
      background-color: rgb(169, 110, 205);
    }
    .item:hover .item-del {
      opacity: 1;
    }
    .input:focus {
      box-shadow: 0px 0px 10px rgb(239, 150, 202);
      border: 2px solid rgb(239, 150, 202);
    }
  </style>
  <script lang="javascript">
    var tot=1;
    function init() {
      console.log("init");
      // document.getElementById('button2').onclick= handleClick;
      // document.getElementById('button2').onclick = handleClickDeleteLast;
      document.getElementById('button2').onclick = handleClickDeleteindex;
      console.log("after init");
    }

    function handlekeydown(e){
      console.log("key in:" + e.key);
      if(e.key=="Enter")
      {
        document.getElementById("button1").click();
      }
    }


    function deleteIndex(a){

      console.log("deleteIndex");
      console.log(a);

      // document.getElementById("checkboxSign").innerHTML="全选";
      // document.getElementById("all_selectedip").checked=false;


      var temp = document.getElementById("todogroup");
      document.getElementById("todo"+a).remove();
    }

    function clickSelectBox(e) {
      console.log("clickSelectBox");
      console.log(e);
      var temp = document.getElementsByClassName("inck");
      for (var i = 0; i < temp.length; i++) {
        temp[i].checked = e.target.checked;
      }

      if(e.target.checked)
      {
        document.getElementById("checkboxSign").innerHTML="全不选";
      }
      else
      {
        document.getElementById("checkboxSign").innerHTML="全选";
      }
    }


    function handleClickDeleteindex(e) {
      console.log("handleClickDeleteIndex");
      console.log(e);

      document.getElementById("checkboxSign").innerHTML="全选";
      document.getElementById("all_selectedip").checked=false;

      var temp = document.getElementById("todogroup");
      // temp.removeChild(temp.childNodes[1]);
      //枚举temp的子节点
      for (var i = temp.childNodes.length-1; i >= 0; i--) {
        //temp1是当前节点
        // var temp1 = temp.childNodes[i];

        //判断单选框是否被勾选，如果被勾选，则删除这个节点
        if (temp.childNodes[i].firstChild .checked) {
          temp.removeChild(temp.childNodes[i]);
        }
        // if(temp.childNodes[i].getElementsByTagName("input"))
        // {
        //   temp.removeChild(temp.firstChild);
        //   console.log(temp.childNodes[i]);
        // }

      }


    }

    function handleClickDeleteLast(e) {
      console.log("handleClickDeleteLast");
      console.log(e);
      var temp = document.getElementById("todogroup");
      temp.removeChild(temp.lastChild);
    }

    function handleClick(e) {
      console.log("handleClick");
      console.log(e);



      //
      document.getElementById("checkboxSign").innerHTML="全选";
      document.getElementById("all_selectedip").checked=false;


      // var temp = document.getElementById("inputtext");
      var temp = getValue();

      document.getElementById("inputtext").value = "";

      if(temp==""){
        alert("输入的todo事件不允许为空！");
        return;
      }

      document.getElementById("todogroup").innerHTML +=
        "<div class='item' id=\"todo"+
            tot+
           "\"><input class=\"inck\" type=\"checkbox\"/>" +
            "<div class='item-value'>"+
           temp +
           '</div>'+
           "<button class='item-del' id=\"todob\""+
           tot +
           "\"  onclick=\"deleteIndex("+
           tot +
           ")\"> 删除</button>"+ "</div>";
      // document.getElementById("todogroup").insertAdjacentHTML("<div>" + temp + "</div>");
      // console.log(temp.value);
      // document.getElementsByClassName("main")[0].style="background-color: #333333"
      tot++;
    }

    function getValue() {
      var temp = document.getElementById("inputtext");
      console.log(temp.value);
      return temp.value;
    }



    init();
  </script>
</html>
